<script type="text/javascript">
    $(document).ready(function () { 
        $("#nghesi_them").jqxButton({ theme:theme, width: 45, height: 45 });
	$("#nghesi_xoa").jqxButton({ theme:theme, width: 45, height: 45 });
	$("#nghesi_capnhat").jqxButton({ theme:theme, width: 45, height: 45  });
	$("#nghesi_huy").jqxButton({ theme:theme, width: 45, height: 45  });
	$("#nghesi_luu").jqxButton({ theme:theme, width: 45, height: 45  });
        
        $("#nghesi_them").bind("click", function(){
            //dat value cho loai thao tac (action)
            $("#action").val("insert");
            $("#nghesi_admintools").setTrangThai(true);
            //mac dinh la se duoc hoat dong khi moi them vo
            $('#nghesi_conhoatdong').jqxCheckBox({ checked:true });
        });
        $("#nghesi_capnhat").bind("click", function(){
            var selectedrowindex = $("#nghesi_danhsach").jqxGrid('getselectedrowindex');
            if(selectedrowindex<0){
                alert("Chưa có nghệ sĩ nào được chọn");
            }else{
                $("#action").val("update");
                $("#nghesi_admintools").setTrangThai(true);
            }
        });
        $("#nghesi_xoa").bind("click", function(){
            //lấy id của hàng hiện tại
            var selectedrowindex = $("#nghesi_danhsach").jqxGrid('getselectedrowindex');
            if(selectedrowindex<0){
                alert("Chưa có nghệ sĩ nào được chọn");
            }else{
                var rowscount = $("#nghesi_danhsach").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var data = $('#nghesi_danhsach').jqxGrid('getrowdata', selectedrowindex);
                    var confirmMessage = confirm("Bạn có chắc muốn xóa nghệ sĩ: " + data["nghedanh"] + "?");
                    var id=data["id"];
                    if (confirmMessage) $("#nghesi_danhsach").jqxGrid('deleterow', id);    
                }
            }
        });
        $("#nghesi_huy").bind("click", function(){
            $("#nghesi_admintools").setTrangThai(false);
        });
        
        $("#nghesi_luu").bind("click", function(){
            $("#nghesi_thongtin").jqxValidator('validate');
            var isSuccess = $('#nghesi_thongtin').data("isSuccess");
            if (isSuccess){
                var action = $("#action").val();
                if (action == "insert"){
                    var datarow = generaterow(null);                
                    $("#nghesi_danhsach").jqxGrid('addrow', null, datarow);
                    console.log('added new row');
                }
                else if (action == "update"){
                    //lay ra index cua HANG duoc chon
                    var selectedrowindex = $("#nghesi_danhsach").jqxGrid('getselectedrowindex');
                    //dem so luong hang cua list
                    var rowscount = $("#nghesi_danhsach").jqxGrid('getdatainformation').rowscount;
                    //neu hang do hop le
                    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                        //lay id cua ca si
                        var id = $("#nghesi_danhsach").jqxGrid('getrowid', selectedrowindex);

                        //dat gia tri cho the input id=nghesi_id, de no submit cung voi form
                        $("#nghesi_ma").val(id);
                        $("#nghesi_anhdaidien_upload").submit();

                        //tao du lieu, lay du lieu tu cac input trong form, va gan id
                        var datarow = generaterow(id);
                        //cho grid update du lieu
                        $("#nghesi_danhsach").jqxGrid('updaterow', id, datarow);
                    }
                }
                $("#nghesi_admintools").setTrangThai(false);
            }
        });
        
   $.fn.setTrangThai = function (condition){
       //condition de chi ra trang thai moi cua form,
       //true se disable nut sua, them, xoa, va false se unlock tui no ra
       //cac nut
       $("#nghesi_them").jqxButton({"disabled": condition});
       $("#nghesi_capnhat").jqxButton({"disabled": condition});
       $("#nghesi_xoa").jqxButton({"disabled": condition});
       //cac truong nhap lieu
       $("#nghesi_danhsach").jqxGrid({ disabled: condition});
       $("#nghesi_nghedanh").jqxInput({"disabled": !condition});
       $("#nghesi_tenthat").jqxInput({"disabled": !condition});
       $("#nghesi_tieusu").jqxInput({"disabled": !condition});
       $("#nghesi_conhoatdong").jqxCheckBox({"disabled": !condition});
       $("#nghesi_ngaysinh").jqxDateTimeInput({"disabled": !condition});
       $("#nghesi_huy").jqxButton({"disabled": !condition});
       $("#nghesi_luu").jqxButton({"disabled": !condition});
       $('#nghesi_thongtin').jqxValidator( { focus: true } );
   };
    
    $("#nghesi_admintools").setTrangThai(false);
    var generaterow = function (id) {
            var row = {};
            row["id"] = id;
            row["tenthat"] = $('#nghesi_tenthat').val();
            row["nghedanh"] = $('#nghesi_nghedanh').val();
            //lay gia tri cua #ngaysinh
            var ngaysinh_unformated = $('#nghesi_ngaysinh').jqxDateTimeInput('value');
            var date = ngaysinh_unformated.getDate().toString();
            var month = ngaysinh_unformated.getMonth().toString();
            var year = ngaysinh_unformated.getFullYear().toString();
            //theo dung dinh dang cua mysql nam/thang/ngay
            var ngaysinh_formated = year + "-" + month + "-" + date;

            //lay trang thai hoat dong cua ca si
            var conhoatdong =  $('#nghesi_conhoatdong').jqxCheckBox('checked');
            if (conhoatdong) row["conhoatdong"] = 1;
            else row["conhoatdong"] = 0;

            row["ngaysinh"] = ngaysinh_formated;

            row["tieusu"] = $('#nghesi_tieusu').val();
            return row;
       };
});
</script>

<div id="nghesi_admintools">
    <div>
        <input type="button" id="nghesi_them" value="Thêm" />
    </div>
    <div>
        <input type="button" id="nghesi_capnhat" value="Sửa" />
    </div>
    <div>
        <input type="button" id="nghesi_xoa" value="Xóa" />
    </div>
    <div>
        <input type="button" id="nghesi_huy" value="Hủy" />
    </div>
    <div>
        <input type="button" id="nghesi_luu" value="Lưu" />
    </div>
</div>